<template>
  <view class="more_shop">
    <z-paging ref="paging" v-model="stores" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="更多"></z-nav-bar>
        <view class="address_top">
          <view class="address_top_left">
            <up-icon name="map-fill" color="#3c9cff" size="20"></up-icon>
            <text class="city-name">{{ common.cityInfo.cityName }}</text>
          </view>
          <view class="address_top_right" @tap="goToMap">
            <up-icon name="map" color="#666" size="16"></up-icon>
            <text class="map-text">地图查看</text>
          </view>
        </view>
      </template>
      <public-loading></public-loading>
      <view class="store_list">
        <view class="store-card" v-for="(store, index) in stores" :key="index"
          @tap="goShopCooperation(store.id,store.storeId)">
          <view class="store-header">
            <text class="store-name">{{ store.storeShortName }}</text>
            <view class="store-tag">店铺</view>
          </view>
          <view class="store-info">
            <view class="location-info">
              <uni-icons class="location-icon" type="location-filled" size="16" color="#666666" />
              <text class="location-text">{{ store.storeLocation }}</text>
            </view>
            <view class="distance">
              <uni-icons class="plane-icon" type="paperplane-filled" size="14" color="#666666" />
              <text class="distance-text" v-if="store.distance">{{ store.distance.toFixed(3) }}km</text>
            </view>
          </view>
          <view class="business-hours" v-if="store.onlineStartTime">
            <text class="hours-label">营业时间</text>
            <text class="hours-value">{{ store.onlineStartTime }}~{{store.onlineEndTime}}</text>
          </view>
          <view class="belong-store" v-if="store.belongStore">
            <text class="belong-label">所属店铺</text>
            <text class="belong-value">{{ store.belongStore }}</text>
          </view>
        </view>
      </view>
    </z-paging>

  </view>
</template>

<script setup>
import {onMounted,ref} from "vue";
import {storeQryIndexList} from '@/api/cleaningOrder'
import {storeDetailsId} from '@/api/pagesShop/index'
import {useCustomStores} from '@/utils/hook'
import {getUserAddress} from '@/api/pagesMy/address'
import { commonStore } from '@/stores/common'
const {common,ShopStore} = useCustomStores()
const CommonStore =commonStore()
const paging = ref(null)
const stores = ref([
  // {
  //   name: '深圳斯派莱尼洗护专店',
  //   tag: '店铺',
  //   address: '南山区·大学城·民企科技园',
  //   distance: '36.4km',
  //   hours: '周一至周日 00:00-24:00'
  // },
  // {
  //   name: '深圳斯派莱尼洗护专店',
  //   tag: '衣柜',
  //   address: '南山区·大学城·民企科技园',
  //   distance: '36.4km',
  //   belongStore: '深圳斯派莱尼洗护专店'
  // },
  // {
  //   name: '深圳斯派莱尼洗护专店',
  //   tag: '店铺',
  //   address: '南山区·大学城·民企科技园',
  //   distance: '36.4km',
  //   hours: '周一至周日 00:00-24:00'
  // },
  // {
  //   name: '深圳斯派莱尼洗护专店',
  //   tag: '店铺',
  //   address: '南山区·大学城·民企科技园',
  //   distance: '36.4km',
  //   hours: '周一至周日 00:00-24:00'
  // }
]);
const queryList = (pageNo, pageSize) => {
  console.log(pageNo,pageSize)
  storeQryIndexList({
    pageNum:pageNo,
    pageSize:pageSize,
    latitude: CommonStore.cityInfo.latitude||null,
    longitude: CommonStore.cityInfo.longitude || null,
  }).then(res=>{
    paging.value.complete(res)
  }).catch(err=>{
    paging.value.complete([])
  })

}
const goToMap = () => {
  uni.navigateTo({
    url: '/pages/cleaningOrder/mapShop'
  })
}
const goShopCooperation = (id,ids) =>{
  storeDetailsId(id).then(res=>{
    ShopStore.setShopInfo({
      ...res,
    })
    uni.navigateTo({
      url: '/pages/cleaningOrder/index?storeId='+ids
    })
  })
}
</script>

<style lang="scss">
.more_shop{
  .address_top{
    box-sizing: border-box;
    width: 100%;
    padding: 24rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;

    .address_top_left{
      display: flex;
      align-items: center;

      .city-name {
        margin-left: 8rpx;
        font-size: 28rpx;
        color: #333;
      }
    }

    .address_top_right {
      display: flex;
      align-items: center;

      .map-text {
        margin-left: 4rpx;
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
.store_list {
  box-sizing: border-box;
  width: 100%;
  padding: 0 30rpx;
}

.store-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.store-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.store-name {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-right: 16rpx;
}

.store-tag {
  background-color: #444444;
  color: #ffffff;
  font-size: 12px;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

.store-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.location-info {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 20rpx;
}

.location-text {
  font-size: 14px;
  color: #666666;
  margin-left: 8rpx;
}

.distance {
  display: flex;
  align-items: center;
}

.distance-text {
  font-size: 14px;
  color: #666666;
  margin-left: 8rpx;
}

.business-hours, .belong-store {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
}

.hours-label, .belong-label {
  font-size: 14px;
  color: #999999;
  margin-right: 16rpx;
}

.hours-value, .belong-value {
  font-size: 14px;
  color: #666666;
}
</style>
